import { Layout, Menu } from "antd";
const { Sider } = Layout;
import type { MenuProps } from "antd";
import { getItemsMap, getAllGroupItemsName } from "./menu-items";
import React from "react";

type MenuItem = Required<MenuProps>["items"][number];

type MenuSiderProps = {
  allowedPages: Array<string>;
  currentTab: string;
};

const MenuSider = (props: MenuSiderProps) => {
  console.log("in menu-sider, allowedpages:", props.allowedPages);

  let itemsMap = getItemsMap();
  let allGroupItemsName = getAllGroupItemsName();
  let selectedGroupItemName = null;

  let showItems = new Array<MenuItem>();
  props.allowedPages.forEach((page) => showItems.push(itemsMap.get(page)));

  allGroupItemsName.forEach((value, key) => {
    if (value.includes(props.currentTab)) {
      selectedGroupItemName = key;
    }
  });

  let menuContent = <></>;
  // if (selectedGroupItemName) {
  //   menuContent = (
  //     <Menu
  //       mode="inline"
  //       selectedKeys={[props.currentTab]}
  //       openKeys={[selectedGroupItemName]}
  //       items={showItems}
  //       theme="light"
  //     />
  //   );
  // } else {
  //   menuContent = (
  //     <Menu
  //       mode="inline"
  //       selectedKeys={[props.currentTab]}
  //       items={showItems}
  //       theme="light"
  //     />
  //   );
  // }
  menuContent = (
    <Menu
      mode="inline"
      selectedKeys={[props.currentTab]}
      items={showItems}
      theme="light"
    />
  );

  return (
    <Sider theme="light" breakpoint="lg" collapsedWidth="0">
      <div className="logo" />
      {menuContent}
    </Sider>
  );
};

export default MenuSider;
